<template>
    <view class="order">
        <!-- 固定在顶部的内容区域 -->
        <view class="fixed-top">
            <!-- 顶部轮播图: circular-循环播放 autoplay-自动播放 interval-间隔时间 duration-动画时长 -->
            <swiper class="banner" circular autoplay interval="3000" duration="500">
                <swiper-item v-for="(item, index) in bannerList" :key="index">
                    <image :src="item" mode="aspectFill"></image>
                </swiper-item>
            </swiper>

            <!-- 公告栏：显示商家公告信息 -->
            <view class="notice">
                <text class="label">公告：</text>
                 <notice-bar 
                    :text="noticeText"
                    :repeatCount="5"
                    :limit="25"
                    :speed="20"
                />
                <!-- <view class="notice-content">
                    <text class="content" :class="{ 'scroll': noticeText.length > 25 }" :style="scrollStyle">{{
                        noticeText }}</text>
                       
                </view> -->
            </view>
        </view>

        <!-- 商品区域：包含左侧分类和右侧商品列表 -->
        <view class="goods-container">
            <!-- 左侧分类列表 
                scroll-y: 允许垂直滚动
                scroll-top: 控制滚动位置，用于同步右侧滚动时的分类定位
            -->
            <scroll-view class="category-list" scroll-y :scroll-top="categoryScrollTop" show-scrollbar="false">
                <!-- 分类项：点击切换分类，当前选中项高亮显示 -->
                <view class="category-item" v-for="(item, index) in categories" :key="item.id"
                    :class="{ active: currentCategoryIndex === index }" @tap="handleCategoryChange(index)">
                    {{ item.categoryName }}
                </view>
            </scroll-view>

            <!-- 右侧商品列表
                scroll-y: 允许垂直滚动
                scroll-into-view: 滚动到指定id的元素位置
                scroll-with-animation: 带动画效果的滚动
                @scroll: 监听滚动事件，用于同步左侧分类
            -->
            <scroll-view class="goods-list" scroll-y :scroll-into-view="currentCategoryIntoView"
                :scroll-with-animation="true" @scroll="handleScroll" show-scrollbar=false>
                <!-- 分类区块：每个分类下的所有商品 -->
                <!-- id用于scroll-into-view定位 -->
                <view v-for="(category, index) in categories" :key="category.id" :id="`categoryRight-${index}`">
                    <!-- 分类标题：吸顶显示 -->
                    <!-- id用于监听滚动时的位置判断 -->
                    <view class="category-block" :id="`title-${index}`">
                        <view class="category-title">
                            {{ category.categoryName }}
                        </view>
                        <!-- 商品项：展示商品信息 -->
                        <view class="goods-item" v-for="(item, index) in getGoodsByCategory(category.id)" :key="index">
                            <!-- 商品图片 -->
                            <image class="goods-img" :src="item.image" mode="aspectFill"></image>
                            <!-- 商品信息区域 -->
                            <view class="goods-info">
                                <text class="name">{{ item.name }}</text>
                                <text class="sold">已售 {{ item.sold }}</text>
                                <view class="bottom">
                                    <view v-if="item.type === '4'">
                                        <text class="price">￥{{ item.price }}起</text>
                                    </view>
                                    <view v-else>
                                        <text class="price">￥{{ item.price }}</text>
                                    </view>
                                    <view class="action" :class="{ 'has-badge': item.count > 0 }">
                                        <!-- 直接增减数量 -->
                                        <view v-if="item.type == '1'" class="stepper">
                                            <text class="minus" @tap="handleMinus(item)" v-if="item.count > 0"></text>
                                            <text class="count" v-if="item.count > 0">{{ item.count }}</text>
                                            <text class="plus" @tap="handlePlus(item)"></text>
                                        </view>

                                        <!-- xx份起购 -->
                                        <view v-else-if="item.type == '2'" class="minimum-btn">
                                            <button v-if="!item.count" class="select-btn" @tap="handleMinimum(item)">{{
                                                item.minimum }}份起购</button>
                                            <view v-else class="stepper">
                                                <text class="minus" @tap="handleMinus(item)"></text>
                                                <text class="count">{{ item.count }}</text>
                                                <text class="plus" @tap="handlePlus(item)"></text>
                                            </view>
                                        </view>

                                        <!-- 限购xx份 -->
                                        <view v-else-if="item.type == '3'" class="stepper">
                                            <text class="minus" @tap="handleMinus(item)" v-if="item.count > 0"></text>
                                            <text class="count" v-if="item.count > 0">{{ item.count }}</text>
                                            <text class="plus" @tap="handlePlus(item)"
                                                :class="{ 'disabled': item.count >= item.limitNum }"></text>
                                            <text class="limit-tip" v-if="item.count === item.limitNum">限购{{
                                                item.limitNum }}份</text>
                                        </view>

                                        <!-- 选规格 -->
                                        <view class="action" :class="{ 'has-badge': item.count > 0 }">
                                            <button v-if="item.type == '4'" class="select-btn"
                                                @tap="handleSelect(item)">选规格</button>
                                            <text v-if="item.type === '4' && item.count > 0" class="badge">{{
                                                item.count }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>

                    </view>
                </view>
            </scroll-view>
        </view>

        <!-- 底部结算栏 -->
        <view class="footer">
            <view class="cart-info">
                <view class="price-box">
                    <text class="label">合计：</text>
                    <text class="price">¥{{ totalPrice }}</text>
                </view>
            </view>
            <button class="submit-btn" :class="{ 'active': totalPrice > 0 }" @tap="handleSubmit">
                {{ totalPrice > 0 ? '下单' : '下单' }}
            </button>
        </view>

        <!-- 规格选择弹框 -->
        <view class="spec-modal" v-if="showSpecModal">
            <view class="mask" @tap="closeSpecModal"></view>
            <view class="content">
                <!-- 商品信息 -->
                <view class="goods-info">
                    <image class="goods-img" :src="currentGoods?.image" mode="aspectFill"></image>
                    <view class="info">
                        <text class="name">{{ currentGoods?.name }}</text>
                        <text class="price">￥{{ calculateSpecPrice() }}</text>
                    </view>
                </view>

                <!-- 规格选项 -->
                <scroll-view class="specs-container" scroll-y>
                    <view class="spec-group" v-for="(spec, index) in currentGoods?.specs" :key="index">
                        <text class="title">{{ spec.name }}</text>
                        <view class="options">
                            <view class="option" v-for="(option, idx) in spec.options" :key="idx"
                                :class="{ active: selectedSpecs[spec.name] === option.text }"
                                @tap="selectSpec(spec.name, option.text)">
                                <text class="option-text">{{ option.text }}</text>
                                <text class="option-price" v-if="option.price > 0">+¥{{ option.price }}</text>
                            </view>
                        </view>
                    </view>
                </scroll-view>

                <!-- 底部操作栏 -->
                <view class="bottom-bar">
                    <view class="left">
                        <text class="total">小计：</text>
                        <text class="price">￥{{ calculateSpecTotal() }}</text>
                    </view>
                    <view class="right">
                        <view class="stepper">
                            <text class="minus" @tap="handleSpecMinus" v-if="specCount > 0"></text>
                            <text class="count" v-if="specCount > 0">{{ specCount }}</text>
                            <text class="plus" @tap="handleSpecPlus"></text>
                        </view>
                        <button class="confirm-btn" :class="{ active: canConfirm }" @tap="handleSpecConfirm">确定</button>
                    </view>
                </view>

                <!-- 添加底部关闭图标 -->
                <view class="close-icon" @tap="closeSpecModal">
                    <image src="/static/icons/close.png" mode="aspectFit"></image>
                </view>
            </view>
        </view>

        <!-- 手机号授权弹框 - 移到最外层 -->
        <phone-auth 
            v-if="showPhoneAuth"
            :show="showPhoneAuth"
            @success="handlePhoneAuthSuccess"
            @fail="handlePhoneAuthCancel"
            @cancel="handlePhoneAuthCancel"
        />
    </view>
</template>

<script>
import { homeApi, orderApi } from '@/api'
import { userStorage } from '@/utils/storage'
import PhoneAuth from '@/components/phone-auth/index.vue'
import NoticeBar from '@/components/notice-bar/index.vue'

export default {
    components: {
        PhoneAuth,
        NoticeBar
    },
    data() {
        return {
            bannerList: [],
            categories: [],
            currentCategoryIndex: 0,
            currentCategoryIntoView: '',
            goodsList: [],
            categoryScrollTop: 0, // 左侧分类列表的滚动位置
            noticeText: '以下商品价格仅供参考', // 原始公告文字
            totalPrice: 0, // 总价
            showSpecModal: false, // 规格弹窗显示状态
            currentGoods: null, // 当前操作的商品
            selectedSpecs: {}, // 已选规格
            specCount: 0, // 规格商品数量
            order: {},
            showPhoneAuth: false, // 添加手机号授权弹框控制
            longNoticeText: '这是一条很长的公告内容，需要分段显示，循环滚动播放。这是第二段内容，继续滚动。这是第三段内容，继续播放下去。'
        }
    },
    computed: {
        // 计算动画时长
        scrollDuration() {
            return this.noticeText.length * 0.5 // 每个字0.2秒
        },
        // 计算滚动样式
        scrollStyle() {
            if (this.noticeText.length > 25) {
                return {
                    animationName: 'scrollText',
                    animationDuration: `${this.scrollDuration}s`,
                    animationTimingFunction: 'linear',
                    animationIterationCount: 'infinite',
                    animationDelay: '1s',
                    animationFillMode: 'both'
                }
            }
            return {}
        },
        // 判断是否可以确认选择
        canConfirm() {
            if (!this.currentGoods) return false
            // 检查是否所有规格都已选择
            return this.currentGoods.specs.every(spec => this.selectedSpecs[spec.name]) && this.specCount > 0
        }
    },
    onShow() {
        this.getBannerList()
        this.getGoodsList()
        this.getCategories()
        this.getHotelInfo()
    },
    methods: {
        // 获取轮播图列表
        getBannerList() {
            homeApi.getBannerList({
                categoryId: 2
            }).then(res => {
                this.bannerList = []
                res.data.forEach(item => {
                    this.bannerList.push(this.$baseUrl + item.imageUrl)
                })
            })
        },
        // 获取商品列表
        getGoodsList() {
            orderApi.getGoodsList().then(res => {
                this.goodsList = res.data
                this.goodsList.forEach(item => {
                    item.image = this.$baseUrl + item.image
                })
            })
        },
        // 获取分类列表
        getCategories() {
            orderApi.getCategoryList().then(res => {
                this.categories = res.data
            })
        },
        getHotelInfo() {
            homeApi.getHotelInfo("1").then(res => {
                this.noticeText = res.data.notice

            })
        },
        // 处理右侧滚动事件：同步左侧分类的选中状态
        handleScroll(e) {
            const query = uni.createSelectorQuery().in(this)
            query.selectAll('.category-block').boundingClientRect(rects => {
                if (!rects) return
                // 找到当前可见的分类标题
                const index = rects.findIndex(item => {
                    return item.top >= 0 && item.top > 41
                })
                if (index > -1) {
                    this.currentCategoryIndex = index
                    if (index > 5) {
                        this.categoryScrollTop += 100
                    } else {
                        this.categoryScrollTop = 0
                    }
                }
            }).exec()
        },

        // 处理分类切换：点击左侧分类时触发
        handleCategoryChange(index) {
            this.currentCategoryIndex = index
            this.currentCategoryIntoView = `categoryRight-${index}` // 控制右侧滚动到对应分类
            if (index > 5) {
                this.categoryScrollTop += 100
            } else {
                this.categoryScrollTop = 0
            }
        },

        // 根据分类ID筛选对应的商品列表
        getGoodsByCategory(categoryId) {
            return this.goodsList.filter(item => item.categoryId === categoryId)
        },

        // 处理直接增加数量
        handlePlus(item) {
            if (item.type == '3' && item.count >= item.limitNum) {
                uni.showToast({
                    title: `限购${item.limitNum}份`,
                    icon: 'none'
                })
                return
            }

            if (item.type == '2' && !item.count) {
                item.count = item.minimum
            } else {
                item.count++
            }
            this.calculateTotal()
        },

        // 处理减少数量
        handleMinus(item) {
            if (item.count > 0) {
                if (item.type == '2' && item.count <= item.minimum) {
                    item.count = 0
                } else {
                    item.count--
                }
            }
            this.calculateTotal()
        },

        // 处理最小起购
        handleMinimum(item) {
            item.count = item.minimum
            this.calculateTotal()
        },

        // 处理选择规格
        handleSelect(item) {
            this.currentGoods = item
            // 如果之前选择过规格，则回显数据
            if (item.selectedSpecs) {
                this.selectedSpecs = { ...item.selectedSpecs }
                this.specCount = item.count
            } else {
                // 没有选择过则清空数据
                this.selectedSpecs = {}
                this.specCount = 0
            }
            this.showSpecModal = true
        },

        // 计算总价
        calculateTotal() {
            this.totalPrice = this.goodsList.reduce((total, item) => {
                // 如果是规格商品，需要计算选择的规格价格
                if (item.type == '4' && item.selectedSpecs) {
                    let specPrice = item.price
                    // 计算已选规格的额外价格
                    Object.entries(item.selectedSpecs).forEach(([specName, option]) => {
                        const spec = item.specs.find(s => s.name === specName)
                        if (spec) {
                            const selectedOption = spec.options.find(o => o.text === option)
                            if (selectedOption) {
                                specPrice += selectedOption.price
                            }
                        }
                    })
                    return total + (item.count * specPrice)
                }
                // 非规格商品直接计算
                return total + (item.count * item.price)
            }, 0)
        },

        // 处理提交订单
        handleSubmit() {
            userStorage.checkPhoneAuth().then(() => {
                // 已授权手机号，继续下单流程
                this.submitOrder()
            }).catch(err => {
                if (err.message === '需要手机号授权') {
                    this.showPhoneAuth = true
                } else {
                    uni.showToast({
                        title: err.message,
                        icon: 'none'
                    })
                }
            })
        },

        // 修改提交订单方法
        submitOrder() {
            if (this.totalPrice <= 0) return
            
            this.order.goodsList = []
            this.order.total = this.totalPrice
            
            this.goodsList.forEach(item => {
                if (item.count > 0) {
                    if (item.type == '4') {
                        // 计算规格商品的价格
                        let specPrice = item.price
                        // 计算已选规格的额外价格
                        Object.entries(item.selectedSpecs).forEach(([specName, option]) => {
                            const spec = item.specs.find(s => s.name === specName)
                            if (spec) {
                                const selectedOption = spec.options.find(o => o.text === option)
                                if (selectedOption) {
                                    specPrice += selectedOption.price
                                }
                            }
                        })
                        
                        this.order.goodsList.push({
                            name: item.name,
                            price: specPrice,
                            count: item.count,
                            spec: Object.values(item.selectedSpecs).join('/') // 只使用规格值，用/分隔
                        })
                    } else {
                        this.order.goodsList.push({
                            name: item.name,
                            price: item.price,
                            count: item.count,
                        })
                    }
                }
            })
            
            this.order.goods = JSON.stringify(this.order.goodsList)
            orderApi.saveOrder(this.order).then(res => {
                uni.showToast({
                    title: '下单成功',
                    icon: 'success'
                })
                this.order = {}
                this.goodsList.forEach(item => {
                    item.count = 0
                    if (item.type == '4') {
                        item.selectedSpecs = {} // 清空已选规格
                    }
                })
                this.totalPrice = 0
            })
        },

        // 关闭规格弹框
        closeSpecModal() {
            this.showSpecModal = false
            this.currentGoods = null

        },

        // 选择规格
        selectSpec(name, option) {
            this.selectedSpecs[name] = option
        },

        // 计算规格价格
        calculateSpecPrice() {
            if (!this.currentGoods) return 0
            let price = this.currentGoods.price
            // 计算所有已选规格的额外价格
            Object.entries(this.selectedSpecs).forEach(([specName, option]) => {
                const spec = this.currentGoods.specs.find(s => s.name === specName)
                if (spec) {
                    const selectedOption = spec.options.find(o => o.text === option)
                    if (selectedOption) {
                        price += selectedOption.price
                    }
                }
            })
            return price
        },

        // 计算规格商品总价
        calculateSpecTotal() {
            const price = this.calculateSpecPrice()
            return (price * this.specCount).toFixed(2) // 保留两位小数
        },

        // 规格商品数量减
        handleSpecMinus() {
            if (this.specCount > 0) {
                this.specCount--
            }
        },

        // 规格商品数量加
        handleSpecPlus() {
            this.specCount++
        },

        // 确认选择规格
        handleSpecConfirm() {
            if (!this.canConfirm) return

            // 更新商品数量和已选规格
            if (this.currentGoods) {
                // 保存选择的规格和数量
                this.currentGoods.count = this.specCount
                this.currentGoods.selectedSpecs = { ...this.selectedSpecs }
                // 保存选择时的单价，用于后续计算
                this.currentGoods.specPrice = this.calculateSpecPrice()
                // 重新计算总价
                this.calculateTotal()
            }

            this.closeSpecModal()
        },

        // 添加手机号授权相关方法
        handlePhoneAuthSuccess() {
            this.showPhoneAuth = false
            // 继续下单流程
            this.submitOrder()
        },
        handlePhoneAuthCancel() {
            this.showPhoneAuth = false
        }
    },
}
</script>

<style lang="scss">
scroll-view ::-webkit-scrollbar {
    display: none;
    color: transparent;
}

.order {
    min-height: 100vh;
    background-color: #f8f8f8;
    position: relative; // 添加相对定位

    .fixed-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10;
        background-color: #fff;

        .banner {
            width: 100%;
            height: 400rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .notice {
            display: flex;
            align-items: center;
            padding: 20rpx;
            background-color: #fff;
            overflow: hidden;

            .label {
                font-size: 28rpx;
                color: #333;
                font-weight: bold;
                flex-shrink: 0;
                margin-right: 10rpx;
            }

            .notice-content {
                flex: 1;
                overflow: hidden;
                position: relative;
                height: 40rpx;

                .content {
                    position: absolute;
                    white-space: nowrap;
                    font-size: 28rpx;
                    color: #666;
                    left: 0;
                    // 滚动动画
                    //scrollText - 动画名称，对应 @keyframes 定义的动画
                    //5s - 动画持续时间
                    //linear - 动画的速度曲线，linear表示匀速运动
                    //infinite - 动画是否无限循环   
                    // &.scroll {
                    //     animation: scrollText 5s linear infinite;
                    // }
                }
            }
        }
    }

    .goods-container {
        position: fixed; // 改为固定定位
        top: 480rpx; // 顶部固定区域的高度
        left: 0;
        right: 0;
        bottom: 100rpx; // 底部结算栏的高度
        display: flex;
        // 移除 margin-top 和 height，因为现在使用固定定位
        // margin-top: 480rpx;
        // height: calc(100vh - 480rpx);

        .category-list {
            width: 200rpx;
            background-color: #f8f8f8;
            height: 100%;

            // 隐藏滚动条
            &::-webkit-scrollbar {
                display: none;
                width: 0 !important;
                height: 0 !important;
                -webkit-appearance: none;
                background: transparent;
            }

            .category-item {
                height: 100rpx;
                line-height: 100rpx;
                text-align: center;
                font-size: 28rpx;
                color: #333;
                background-color: #f8f8f8;

                &.active {
                    color: #1989fa;
                    background-color: #fff;
                    font-weight: bold;
                }
            }
        }

        .goods-list {
            flex: 1;
            background-color: #fff;
            padding: 20rpx;
            height: 100%;
            box-sizing: border-box;

            // 隐藏滚动条
            &::-webkit-scrollbar {
                display: none;
                width: 0 !important;
                height: 0 !important;
                -webkit-appearance: none;
                background: transparent;
            }

            .category-title {
                padding: 20rpx 0;
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                background-color: #fff;
                position: sticky;
                top: 0;
                z-index: 1;
            }

            .goods-item {
                display: flex;
                padding: 20rpx 0;
                border-bottom: 2rpx solid #f5f5f5;

                .goods-img {
                    width: 160rpx;
                    height: 160rpx;
                    border-radius: 12rpx;
                }

                .goods-info {
                    flex: 1;
                    margin-left: 20rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .name {
                        font-size: 28rpx;
                        color: #333;
                        font-weight: bold;
                    }

                    .sold {
                        font-size: 26rpx;
                        color: #999;
                    }

                    .bottom {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .price {
                            font-size: 32rpx;
                            color: #ff4d4f;
                            font-weight: bold;
                        }

                        .action {
                            position: relative; // 移到外层，确保角标定位正确
                            display: inline-block; // 让容器大小由内容决定

                            .select-btn {
                                height: 60rpx;
                                line-height: 60rpx;
                                padding: 0 30rpx;
                                font-size: 26rpx;
                                color: #fff;
                                background: linear-gradient(to right, #1989fa, #39b9fa);
                                border-radius: 30rpx;
                                border: none;

                                &:active {
                                    opacity: 0.8;
                                }
                            }

                            .badge {
                                position: absolute;
                                top: -10rpx;
                                right: 4rpx;
                                min-width: 32rpx;
                                height: 32rpx;
                                line-height: 32rpx;
                                padding: 0 6rpx;
                                font-size: 26rpx;
                                color: #fff;
                                background-color: #ff4d4f;
                                border-radius: 16rpx;
                                box-sizing: border-box;
                                text-align: center;
                                transform: scale(0.9); // 稍微缩小一点
                                transform-origin: right top;

                                // 当数字较大时扩大宽度
                                &:not(:empty) {
                                    padding: 0 6rpx;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    // 底部结算栏
    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100rpx;
        z-index: 10; // 添加层级确保在最上层
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

        .cart-info {
            flex: 1;

            .price-box {
                display: flex;
                align-items: baseline;

                .label {
                    font-size: 28rpx;
                    color: #333;
                }

                .price {
                    font-size: 36rpx;
                    color: #ff4d4f;
                    font-weight: bold;
                }
            }

            .tip {
                font-size: 24rpx;
                color: #999;
                margin-top: 4rpx;
            }
        }

        .submit-btn {
            width: 200rpx;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            background-color: #cccccc;
            color: #fff;
            font-size: 28rpx;
            border-radius: 40rpx;
            margin: 0;

            &.active {
                background: linear-gradient(to right, #1989fa, #39b9fa);
            }
        }
    }

    // 移除多余的margin-bottom设置
    // .goods-container {
    //     margin-bottom: 100rpx;
    // }
}

// 修改滚动动画
@keyframes scrollText {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100% + 420rpx));
    }
}

.stepper {
    display: flex;
    align-items: center;
    position: relative;

    .minus,
    .plus {
        width: 40rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx; // 增大字号
        border-radius: 25rpx;
        padding: 0; // 移除内边距
        box-sizing: border-box; // 确保边框不影响大小

        // 使用伪元素实现加减号，确保居中
        &::before {
            content: '';
            width: 16rpx; // 横线宽度
            height: 2rpx; // 横线高度
            background: currentColor; // 使用当前文字颜色
            position: absolute;
        }
    }

    // 加号的竖线
    .plus::after {
        content: '';
        width: 2rpx; // 竖线宽度
        height: 16rpx; // 竖线高度
        background: currentColor;
        position: absolute;
    }

    .minus {
        border: 2rpx solid #1989fa;
        background: transparent;
        color: #1989fa;

        &:active {
            opacity: 0.8;
        }

        &.disabled {
            border-color: #cccccc;
            color: #cccccc;

            &:active {
                opacity: 1;
            }
        }
    }

    .plus {
        background: linear-gradient(to right, #1989fa, #39b9fa);
        color: #fff;
        border: 2rpx solid #1989fa;

        &:active {
            opacity: 0.8;
        }

        &.disabled {
            background: #cccccc;
            border: 2rpx solid #cccccc;

            &:active {
                opacity: 1;
            }
        }
    }

    .count {
        min-width: 60rpx;
        text-align: center;
        font-size: 28rpx;
        color: #333;
        margin: 0 5rpx;
    }
}

.minimum-btn {
    .select-btn {
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 30rpx;
        font-size: 26rpx;
        color: #fff;
        background: linear-gradient(to right, #1989fa, #39b9fa);
        border-radius: 30rpx;
        border: none;

        &:active {
            opacity: 0.8;
        }
    }
}

.limit-tip {
    position: absolute;
    top: -40rpx;
    right: 0;
    font-size: 24rpx;
    color: #ff4d4f;
    white-space: nowrap;
}

// 规格选择弹框
.spec-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex; // 添加flex布局
    align-items: center; // 垂直居中
    justify-content: center; // 水平居中

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .content {
        position: relative; // 改为相对定位
        width: 92%; // 增加宽度
        max-width: 700rpx; // 增加最大宽度
        background-color: #fff;
        border-radius: 24rpx; // 四周都是圆角
        z-index: 101; // 确保在遮罩层上面

        .goods-info {
            padding: 30rpx;
            display: flex;
            align-items: flex-start;
            position: relative;
            border-bottom: 2rpx solid #f5f5f5;

            .goods-img {
                width: 160rpx;
                height: 160rpx;
                border-radius: 12rpx;
            }

            .info {
                flex: 1;
                margin-left: 20rpx;
                padding-right: 40rpx;
                display: flex; // 添加flex布局
                flex-direction: column; // 垂直排列
                justify-content: space-between; // 垂直均匀分布

                .name {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: bold;
                    margin-bottom: 10rpx; // 添加底部间距
                }

                .price {
                    font-size: 32rpx;
                    color: #ff4d4f;
                    font-weight: bold;
                }
            }
        }

        .specs-container {
            max-height: 600rpx;
            padding: 30rpx;

            &::-webkit-scrollbar {
                display: none;
                width: 0 !important;
                height: 0 !important;
                -webkit-appearance: none;
                background: transparent;
            }

            .spec-group {
                margin-bottom: 30rpx;

                .title {
                    font-size: 28rpx;
                    color: #333;
                    font-weight: bold;
                    margin-bottom: 20rpx;
                }

                .options {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 20rpx;

                    .option {
                        display: flex;
                        align-items: center;
                        padding: 15rpx 30rpx;
                        background-color: #f5f5f5; // 添加默认背景色
                        border-radius: 30rpx; // 添加圆角

                        .option-text {
                            color: #333;
                            font-size: 26rpx;
                        }

                        .option-price {
                            font-size: 24rpx;
                            color: #ff4d4f;
                            margin-left: 10rpx;

                            &:empty {
                                display: none;
                            }
                        }

                        &.active {
                            background: linear-gradient(to right, #1989fa, #39b9fa); // 选中时的渐变背景

                            .option-text,
                            .option-price {
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }

        .bottom-bar {
            padding: 20rpx 30rpx;
            border-top: 2rpx solid #f5f5f5;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                display: flex;
                align-items: baseline;

                .total {
                    font-size: 28rpx;
                    color: #333;
                }

                .price {
                    font-size: 36rpx;
                    color: #ff4d4f;
                    font-weight: bold;
                }
            }

            .right {
                display: flex;
                align-items: center;
                gap: 20rpx;

                .confirm-btn {
                    width: 160rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    text-align: center;
                    background-color: #cccccc;
                    color: #fff;
                    font-size: 28rpx;
                    border-radius: 30rpx;
                    margin: 0;

                    &.active {
                        background: linear-gradient(to right, #1989fa, #39b9fa);
                    }
                }
            }
        }

        // 添加底部关闭图标样式
        .close-icon {
            position: absolute;
            left: 50%;
            bottom: -120rpx;
            transform: translateX(-50%);
            width: 80rpx;
            height: 80rpx;
            padding: 20rpx;

            image {
                width: 100%;
                height: 100%;
            }

            &:active {
                opacity: 0.8;
            }
        }
    }
}

.action {
    position: relative; // 移到外层，确保角标定位正确
    display: inline-block; // 让容器大小由内容决定

    .select-btn {
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 30rpx;
        font-size: 26rpx;
        color: #fff;
        background: linear-gradient(to right, #1989fa, #39b9fa);
        border-radius: 30rpx;
        border: none;

        &:active {
            opacity: 0.8;
        }
    }

    .badge {
        position: absolute;
        top: -6rpx;
        right: -6rpx;
        min-width: 28rpx;
        height: 28rpx;
        line-height: 28rpx;
        padding: 0 6rpx;
        font-size: 20rpx;
        color: #fff;
        background-color: #ff4d4f;
        border-radius: 14rpx;
        box-sizing: border-box;
        text-align: center;
        transform: scale(0.9); // 稍微缩小一点
        transform-origin: right top;

        // 当数字较大时扩大宽度
        &:not(:empty) {
            padding: 0 6rpx;
        }
    }
}

// 添加弹框样式优化
:deep(.phone-auth-modal) {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100000; // 确保在最上层
    
    .mask {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
    }
    
    .content {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translateY(0); // 确保不会被压缩
        background: #fff;
        border-radius: 24rpx 24rpx 0 0;
        max-height: 90vh;
        min-height: 400rpx; // 设置最小高度
        display: flex;
        flex-direction: column;
        
        .body {
            flex: 1;
            overflow-y: auto; // 内容过多时可滚动
            -webkit-overflow-scrolling: touch;
        }
    }
}
</style>